<template>
  <div>
      <el-container>

        <el-main>
          <div style="text-align: left" class="div1">
            <br />
            <span>角色名称:</span>
            <el-input placeholder="请输入角色名称" v-model="input1" style="width:200px;margin-right:20px"></el-input>
            <span>权限字符:</span>
            <el-input placeholder="请输入权限字符" v-model="input2" style="width:200px;margin-right:20px"></el-input>
            <span>状态:</span>
            <el-select v-model="input3" placeholder="状态">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            <span class="demonstration">创建时间:</span>
            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <!--查询-->
            <el-button type="info" icon="el-icon-search" @click="select()">查询</el-button>
            <!--添加按钮-->
            <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">新增</el-button>

            <!--添加模态框-->
            <el-dialog title="新增信息" :visible.sync="dialogVisible" width="30%" >

              <br />
              <div class="addinput">
                <br>
                <strong>角色名称</strong>
                <el-input placeholder="请输入角色名称" v-model="addroleName" style="width: 300px"></el-input>
                <br>
                <strong>权限字符</strong>
                <el-input placeholder="请输入权限字符" v-model="addroleKey" style="width: 300px"></el-input>
                <br>
                <strong>角色顺序</strong>
                <el-input-number v-model="addroleSort" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                <div>
                  <strong>状态</strong>
                  <el-radio v-model="addstatus" label="0">正常</el-radio>
                  <el-radio v-model="addstatus" label="1">停用</el-radio>
                </div>
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addremark">
                </el-input>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save(), (dialogVisible = false)">确 定</el-button>
              </span>
            </el-dialog>
            <!--修改模态框-->
            <el-dialog title="修改信息" :visible.sync="updialogVisible" width="30%" >

              <br />
              <div class="addinput">
                <br>
                <strong>角色名称</strong>
                <el-input placeholder="请输入角色名称" v-model="uproleName" style="width: 300px"></el-input>
                <br>
                <strong>权限字符</strong>
                <el-input placeholder="请输入权限字符" v-model="uproleKey" style="width: 300px"></el-input>
                <br>
                <strong>角色顺序</strong>
                <el-input-number v-model="uproleSort" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                <div>
                  <strong>状态</strong>
                  <el-radio v-model="upstatus" label="0">正常</el-radio>
                  <el-radio v-model="upstatus" label="1">停用</el-radio>
                </div>
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="upremark">
                </el-input>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="updialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update(), (updialogVisible = false)">确 定</el-button>
              </span>
            </el-dialog>
          </div>


          <el-table :data="tableData" :header-cell-style="{ backgroundColor: 'aliceblue'}" @selection-change="handleSelectionChange"><!-- 表头设置浅蓝色 -->
            <el-table-column type="selection" width="55" align="center"><!-- 选择多行数据时使用 Checkbox -->
            </el-table-column><!-- 选择多行数据时使用 Checkbox -->
            <el-table-column prop="roleId" label="角色编号" width="120">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="120">
            </el-table-column>
            <el-table-column prop="roleKey" label="权限字符" width="140">
            </el-table-column>
            <el-table-column prop="roleSort" label="显示顺序" width="120">
            </el-table-column>
            <template slot-scope=""><!-- 类型转换 -->
              <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                  <span v-html="status1(scope.row.status)"></span>
                </template>
              </el-table-column>
            </template>
            <template slot-scope=""><!-- 时间转换 -->
              <el-table-column label="创建时间" width="400">
                <template slot-scope="scope">
                  <span v-html="getYMDHMS(scope.row.createTime)"></span>
                </template>

              </el-table-column>
            </template>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <!--修改按钮-->
                <el-button type="text" @click="find(scope.row.roleId),(updialogVisible = true)">修改</el-button>
                <!--删除按钮-->
                <el-button size="mini" type="danger"  @click="del(scope.row.roleId)">删除</el-button>
                <!--更多按钮-->
                <el-button size="mini" type="danger"  @click="0">更多</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row>
            <el-col style="text-align: right">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                             :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                             :total="total">

              </el-pagination>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
  </div>
</template>

<script>
export default {
  name: "user",
  //页面自动加载，
  created: function () {
    this.select();
  },
  data() {
    return {
      //分页
      pageNum: 1, //默认当前页数
      pageSize: 5, //默认每页显示条数
      total: 0, //总数据条数

      tableData: [],
      input1 : "",
      input2 : "",
      input3 : "",
      value1 : "",
      options: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "停用",
        },
      ],
      dialogVisible : false,
      addstatus: "",
      addroleName : '',
      addroleKey : '',
      addroleSort : 1,
      addremark : '',
      updialogVisible : false,
      upstatus: "",
      uproleName : '',
      uproleKey : '',
      uproleSort : "",
      upremark : '',
      uproleId : '',
    };
  },
  props: {},
  methods: {
    handleSelectionChange(rows){//当前选中的所有行的数据
      console.log(rows)
      let ids = rows.map(v => v.id)
    },
    select : function(){
      var that = this;
      this.$axios.post("/sysRole/quest",{
        roleName : this.input1,
        roleKey : this.input2,
        status : this.input3,
        //分页
        pageNum: that.pageNum,
        pageSize: that.pageSize,
      })
          .then(function(response){
                that.tableData = response.data.data;
                that.total = response.data.pageInfo.total;
              }
          )
    },
    save : function(){
      var that = this;
      this.$axios.post("/sysRole/save",{

        status : that.addstatus,
        roleName: that.addroleName,
        roleKey: that.addroleKey,
        roleSort: that.addroleSort,
        remark: that.addremark,

      })
          .then(function(){
            that.select(),
                that.$message({
                  //弹出框
                  message: "新增成功!",
                  type: "success",
                });
          })
    },
    del : function(roleId){
      var that = this;
      this.$axios.post("/sysRole/del",{
        roleId : roleId

      }).then(function(){
        that.select(),
            that.$message({
              //弹出框
              message: "删除成功!",
              type: "success",
            });
      })
    },
    find : function(roleId){
      var that = this;
      this.$axios.post("/sysRole/find",{
        roleId : roleId
      }).then(function(response){
        if (response.data.code == "3333") {
          that.upstatus = response.data.data.status;
          that.uproleName = response.data.data.roleName;
          that.uproleKey = response.data.data.roleKey ;
          that.uproleId = response.data.data.roleId;
          that.uproleSort = response.data.data.roleSort;
          that.upremark = response.data.data.remark;

        } else {
          //alert("修改失败");
        }
      })
    },
    update : function(){
      var that = this;
      this.$axios.post("/sysRole/update",{
        status : that.upstatus,
        roleName : that.uproleName,
        roleKey : that.uproleKey,
        roleSort : that.uproleSort,
        roleId :that.uproleId,

        remark : that.upremark,
      }).then(function(){
        that.select();
      })
    },
    handleChange(value) {
      console.log(value);
    },
    // 获取当前页的数据信息
    //pageSize 默认每页显示条数改变时会触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.select(this.pageNum, this.pageSize); //console.log(`每页 ${val} 条`);
    }, //currentPage 默认当前页数改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.select(this.pageNum, this.pageSize); //console.log(`当前页: ${val}`);
    },
    //时间格式转换
    getYMDHMS: function (timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }return (
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hours +
          ":" +
          minute +
          ":" +
          second
      );
    },
    //类型转换
    status1(status) {
      if (status == "0") {
        return "正常";
      } else if (status == "1") {
        return "停用";
      }
    },
  },
};
</script>

<style></style>
